<template>
    <el-container class="account_type_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header"
                                :table-ref="tableOptions.ref"
                                :toolbar_buttons="headerOption.toolbar_buttons"
                                :toolbar_filter="headerOption.toolbar_filter"
                                :searchForm="searchForm"
                                @event="handleHeaderEvent">
                    <template slot="right_search">
                        <div class="search_item">
                            <el-select v-model="searchForm.key2" clearable @change="getList(true)"
                                       style="width: 90px;">
                                <el-option label="类型" value=""/>
                                <el-option label="收款" value="cash_in"/>
                                <el-option label="付款" value="cash_out"/>
                            </el-select>
                        </div>
                    </template>
                </headerTemplate>
                <div class="card_content">
                    <vxeTableTemplate :data="dataList" :options.sync="tableOptions"
                                      @event="handleTableEvent" />
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import AccountTypeForm from "./AccountTypeForm";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "AccountType",
    data() {
        const _this = this;
        return {
            headerOption: {
                toolbar_buttons: [
                    {
                        id: "refresh",
                        icon: "el-icon-refresh-right",
                        show: true,
                        method: () => {
                            _this.getList();
                        },
                    },
                    {
                        id: "add",
                        icon: "fa fa-plus",
                        type: "primary",
                        show: true,
                        permission: "jxc:accountType:save",
                        method: () => {
                            _this.openDialog(null, 'add');
                        },
                    },
                    {
                        id: "edit",
                        icon: "fa fa-pencil",
                        type: "success",
                        show: true,
                        permission: "jxc:accountType:save",
                        method: () => {
                            _this.openDialog(null, 'edit');
                        },
                    },
                    {
                        id: "delete",
                        icon: "fa fa-trash-o",
                        type: "danger",
                        show: true,
                        permission: "jxc:accountType:delete",
                        method: () => {
                            _this.delAccountType(null, 'batch');
                        },
                    },
                ],
                toolbar_filter: [
                    { type: "text", field: "key3", label: "类型编码" },
                    { type: "text", field: "display_text", label: "类型名称" },
                ],
            },
            searchForm: {
                state: '',
                key2: '',
            },
            dataList: [],
            selectionList: [],
            tableOptions: {
                ref: "accountTypeTable",
                container: ".account_type_container",
                multiSelect: true,
                checkboxConfig: {
                    visibleMethod({ row }) {
                        return row.pre_set !== 1;
                    },
                    checkMethod({ row }) {
                        return row.pre_set !== 1;
                    },
                },
                columns: [
                    {
                        label: "类型",
                        prop: "key2",
                        align: "center",
                        formatter(row) {
                            return row.key2 === 'cash_in' ? '收款' : '付款';
                        },
                    },
                    {
                        label: "类型编码",
                        prop: "key3",
                        align: "center",
                    },
                    {
                        label: "类型名称",
                        prop: "display_text",
                        align: "center",
                    },
                    {
                        label: "算术运算符",
                        prop: "value",
                        align: "center",
                    },
                    {
                        label: "是否预设",
                        prop: "pre_set",
                        align: "center",
                        formatter(row) {
                            return row.pre_set === 1 ? '是' : '否';
                        },
                    },
                    {
                        label: "排序",
                        prop: "sn",
                        align: "center",
                    },
                ],
                operates: {
                    fixed: "right",
                    list: [
                        {
                            id: "edit",
                            icon: "fa fa-pencil",
                            type: "success ",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "编辑",
                            },
                            filter(row) {
                                return row.pre_set === 0;
                            },
                            permission: "jxc:accountType:save",
                            method: (index, row) => {
                                _this.openDialog(row, 'edit');
                            },
                        },
                        {
                            id: "del",
                            icon: "fa fa-trash-o",
                            type: "danger",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "删除",
                            },
                            filter(row) {
                                return row.pre_set === 0;
                            },
                            permission: "jxc:accountType:delete",
                            method: (index, row) => {
                                _this.delAccountType(row);
                            },
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1,
                },
            },
        };
    },
    mounted() {
        this.getList(true);
    },
    methods: {
        handleHeaderEvent(event) {
            const _this = this;
            _this.searchForm = $.extend({}, _this.searchForm, event.searchForm);
            if (event.type === "search") {
                _this.getList(true);
            } else if (event.type === "refresh") {
                _this.getList(true);
            }
        },
        getList(query) {
            const _this = this;
            if (query) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            queryData.key1 = 'jxc_account_type';
            _this.fetchData(_this.$api.API_FindCommonParameterValues, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {
            });
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        openDialog(row, type) {
            const _this = this;
            let title = type === 'add' ? '创建收付款类型' : '编辑收付款类型';
            if (!row) {
                if (type === 'add') {
                    row = {
                        key1: 'jxc_account_type',
                    };
                }
                if (type === 'edit') {
                    if (!_this.checkSelection(_this.selectionList)) {
                        return;
                    }
                    row = $.extend({}, _this.selectionList[0]);
                }
            }
            _this.$dialog({
                title,
                width: '400px',
                component: {
                    value: AccountTypeForm,
                    props: {
                        row,
                    },
                },
                confirmed() {
                    _this.getList();
                },
            });
        },
        //删除
        delAccountType(row, type) {
            const _this = this;
            let sids = [];
            if (type === "batch") {
                if (!_this.checkSelection(_this.selectionList)) {
                    return;
                }
                sids = _this.selectionList.map(item => item.sid);
            } else {
                sids.push(row.sid);
            }
            _this.confirmDel(sids);
        },
        confirmDel(sids) {
            const _this = this;
            _this.$confirm("是否继续删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                _this.fetchData(_this.$api.API_DeleteJxcFinanceAccountType, { sids }).then(() => {
                    _this.$message.success("删除成功");
                    _this.getList();
                }).catch(() => {
                });
            }).catch(() => {
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.account_type_container {
    width: 100%;
    height: 100%;
}
</style>
